/**
 * Created by YJH on 2018/5/30.
 */
import React, {Component} from 'react';
import {
    StyleSheet,
    Text,
    View,
    TouchableOpacity,
    Image,
    ScrollView,
    DeviceEventEmitter,
} from 'react-native';
import Toast, {DURATION} from 'react-native-easy-toast';
import NavigationBarComponent from '../NavigationBarComponent';
import TabCustomPage from './TabCustomPage';
import SortKeyPage from './SortKeyPage';
import {MORE_MENU} from './MoreMenu';
import GlobalStyles from '../../../res/styles/GlobalStyles';
import NavigationBarUtil from '../../util/NavigationBarUtil';
import LanguageDao, {FLAG_LAN} from '../../expand/dao/LanguageDao';
import AboutPage from './AboutPage';
import ImageSelector from '../../nativeJs/ImageSelector';
import CustomThemePage from './CustomThemePage';
import BasePage from '../home/BasePage';
const KEY = 'KEY-Async';
export default class AsyncStoragePage extends BasePage {


    constructor(props) {
        super(props);

        this.state = {
            inputTxt: '',
            themeVisible: false,
            theme: this.props.hTheme,
            imgUrl: "中泰民安",
        }

    }

    componentDidMount() {
        //注册扫描监听
        DeviceEventEmitter.addListener('onScanningResult', this.onScanningResult);
    }

    onScanningResult = (eventName, params) => {

        //收到原生代码的发射通知，弹出toast提示
        this.toast.show(eventName, DURATION.LENGTH_SHORT);
    };

    componentWillUnmount() {
        DeviceEventEmitter.removeListener('onScanningResult', this.onScanningResult);//移除扫描监听
    }

    onItemClick(tab) {
        let TabComponent, params = {...this.props, menuType: tab, theme: this.props.theme};
        switch (tab) {
            case MORE_MENU.custom_language:
                TabComponent = TabCustomPage;
                params.flag = FLAG_LAN.flagLanguage;
                params.isPopular = false;
                break;

            case MORE_MENU.sort_language:
                TabComponent = SortKeyPage;
                params.flag = FLAG_LAN.flagLanguage;
                params.isPopular = false;
                break;

            case MORE_MENU.custom_key:
                TabComponent = TabCustomPage;
                params.flag = FLAG_LAN.flagKey;
                params.isPopular = true;
                break;

            case MORE_MENU.remove_key:
                TabComponent = TabCustomPage;
                params.flag = FLAG_LAN.flagKey;
                params.isPopular = true;
                break;

            case MORE_MENU.sort_key:
                TabComponent = SortKeyPage;
                params.flag = FLAG_LAN.flagKey;
                params.isPopular = true;
                break;

            case MORE_MENU.custom_theme:
                this.setState({themeVisible: true});
                break;

            case MORE_MENU.about:
                TabComponent = AboutPage;
                break;

            case MORE_MENU.about_author:

                this.onSelectPicsFuc1();
                // this.onSelectPicsFuc2();
                // this.onSelectPicsFuc3();

                // this.onSelectPicturesCallback();
                break;
        }

        // debugger;//debug模式下，代码执行到这里会暂停
        if (TabComponent) {
            this.props.navigator.push({
                component: TabComponent,
                params: params,
            })
        }

    }

    renderThemeView() {
        return <CustomThemePage
            themeVisible={this.state.themeVisible}
            {...this.props}
            onModalClose={() =>
                this.setState({themeVisible: false})
            }
        />
    }

    /**
     *
     * Promise 方式1
     * 功能：获取使用原生打开相册并获取图片的回调地址方式
     *
     */
    onSelectPicsFuc1() {
        ImageSelector.chooseImgPromise().then((result) => {
            this.setState({
                imgUrl: result
            })

        }).catch(error => {
            console.log(error);
            this.setState({
                imgUrl: error
            })
        });
    }

    /**
     *
     * Promise 方式2
     * 功能：获取使用原生打开相册并获取图片的回调地址方式
     *
     */
    async onSelectPicsFuc2() {
        var _promise = await ImageSelector.chooseImgPromise();
        _promise.then((result) => {
            this.setState({
                imgUrl: result
            })

        }).catch(error => {
            console.log(error);
            this.setState({
                imgUrl: error
            })
        });
    }

    /**
     * Promise 方式3
     * 功能：获取使用原生打开相册并获取图片的回调地址方式
     * @returns {Promise.<void>}
     */
    async onSelectPicsFuc3() {
        var imgPromise = await ImageSelector.chooseImgPromise();
        this.setState({
            imgUrl: imgPromise
        })

    }

    /**
     * Callback 方式
     * 功能：获取使用原生打开相册并获取图片的回调地址方式
     */
    onSelectPicturesCallback() {
        ImageSelector.chooseImgCallback((result) => {
            console.log(result);
            this.setState({
                    imgUrl: result
                }
            )
        }, (error) => {
            console.log(error);
            this.setState({
                    imgUrl: error
                }
            )
        })
    }

    render() {
        return <View style={styles.container}>
            <NavigationBarComponent
                style={this.state.theme.styles.navBar}
                title={'我的'}
                statusBar={{backgroundColor: this.state.theme.styles.themeColor}}
            />

            <ScrollView>
                {/*关于作者*/}
                <TouchableOpacity onPress={() => this.onItemClick(MORE_MENU.about_author)}>
                    <View style={styles.item}>
                        <View style={styles.item}>
                            <Image style={
                                [{width: 40, height: 40, alignSelf: 'center'}]}
                                   source={this.state.imgUrl !== "中泰民安" ? {uri: "file:///" + this.state.imgUrl}
                                       : {uri: 'https://img.mukewang.com/545866b700013ce302200220-140-140.jpg'}}/>
                            <Text
                                numberOfLines={1}
                                ellipsizeMode="tail"
                                style={{
                                    alignSelf: 'center',
                                    fontSize: 20,
                                    color: 'black',
                                    marginHorizontal: 5,
                                }}>{this.state.imgUrl}</Text>
                        </View>
                        <Image style={
                            [{width: 20, height: 20, alignSelf: 'center'}, this.state.theme.styles.tabBarSelectedIcon]}
                               source={require('../../../res/images/ic_tiaozhuan.png')}/>
                    </View>
                </TouchableOpacity>
                <View style={GlobalStyles.line}/>

                {/*最热管理*/}
                <View style={{flex: 1, backgroundColor: '#E0E0E0'}}><Text
                    style={styles.item_title}>{MORE_MENU.trending_manage}</Text></View>
                <View style={GlobalStyles.line}/>
                {NavigationBarUtil.getSettingItem(require('../../../res/images/ic_custom_language.png'),
                    MORE_MENU.custom_language, this.state.theme.styles.tabBarSelectedIcon, null, () => this.onItemClick(MORE_MENU.custom_language))}
                <View style={GlobalStyles.line}/>
                {NavigationBarUtil.getSettingItem(require('../../../res/images/ic_swap_vert.png'),
                    MORE_MENU.sort_language, this.state.theme.styles.tabBarSelectedIcon, null, () => this.onItemClick(MORE_MENU.sort_language))}
                <View style={GlobalStyles.line}/>

                {/*标签管理*/}
                <View style={{flex: 1, backgroundColor: '#E0E0E0'}}><Text
                    style={styles.item_title}>{MORE_MENU.key_manage}</Text></View>
                <View style={GlobalStyles.line}/>
                {NavigationBarUtil.getSettingItem(require('../../../res/images/ic_custom_language.png'),
                    MORE_MENU.custom_key, this.state.theme.styles.tabBarSelectedIcon, null, () => this.onItemClick(MORE_MENU.custom_key))}
                <View style={GlobalStyles.line}/>
                {NavigationBarUtil.getSettingItem(require('../../../res/images/ic_swap_vert.png'),
                    MORE_MENU.sort_key, this.state.theme.styles.tabBarSelectedIcon, null, () => this.onItemClick(MORE_MENU.sort_key))}
                <View style={GlobalStyles.line}/>
                {NavigationBarUtil.getSettingItem(require('../../../res/images/ic_remove.png'),
                    MORE_MENU.remove_key, this.state.theme.styles.tabBarSelectedIcon, null, () => this.onItemClick(MORE_MENU.remove_key))}
                <View style={GlobalStyles.line}/>


                {/*设置*/}
                <View style={{flex: 1, backgroundColor: '#E0E0E0'}}><Text
                    style={styles.item_title}>{MORE_MENU.custom_setting}</Text></View>
                <View style={GlobalStyles.line}/>
                {NavigationBarUtil.getSettingItem(require('../../../res/images/ic_view_quilt.png'),
                    MORE_MENU.custom_theme, this.state.theme.styles.tabBarSelectedIcon, null, () => this.onItemClick(MORE_MENU.custom_theme))}
                <View style={GlobalStyles.line}/>
                {NavigationBarUtil.getSettingItem(require('../../../res/images/ic_brightness.png'),
                    MORE_MENU.mode_night, this.state.theme.styles.tabBarSelectedIcon, null, () => this.onItemClick(MORE_MENU.mode_night))}
                <View style={GlobalStyles.line}/>
                {NavigationBarUtil.getSettingItem(require('../../../res/images/ic_insert_emoticon.png'),
                    MORE_MENU.about, this.state.theme.styles.tabBarSelectedIcon, null, () => this.onItemClick(MORE_MENU.about))}
                <View style={GlobalStyles.line}/>
            </ScrollView>
            {this.renderThemeView()}


            {/*<Text style={styles.text}*/}
            {/*onPress={() => {*/}
            {/*this.props.navigator.push({*/}
            {/*component: TabCustomPage,*/}
            {/*params: {...this.props, isRemove:false,isPopular:true,},*/}
            {/*})*/}
            {/*}}*/}
            {/*>最热自定义标签页面</Text>*/}
            {/*<Text style={styles.text}*/}
            {/*onPress={() => {*/}
            {/*this.props.navigator.push({*/}
            {/*component: SortKeyPage,*/}
            {/*params: {...this.props,isPopular:true,},*/}
            {/*})*/}
            {/*}}*/}
            {/*>最热标签排序页面</Text>*/}
            {/*<Text style={styles.text}*/}
            {/*onPress={() => {*/}
            {/*this.props.navigator.push({*/}
            {/*component: TabCustomPage,*/}
            {/*params: {...this.props, isRemove:true,isPopular:true,},*/}
            {/*})*/}
            {/*}}*/}
            {/*>最热标签移除页面</Text>*/}


            {/*<Text style={styles.text}*/}
            {/*onPress={() => {*/}
            {/*this.props.navigator.push({*/}
            {/*component: TabCustomPage,*/}
            {/*params: {...this.props, isRemove:false,isPopular:false,},*/}
            {/*})*/}
            {/*}}*/}
            {/*>热搜自定义标签页面</Text>*/}
            {/*<Text style={styles.text}*/}
            {/*onPress={() => {*/}
            {/*this.props.navigator.push({*/}
            {/*component: SortKeyPage,*/}
            {/*params: {...this.props,isPopular:false,},*/}
            {/*})*/}
            {/*}}*/}
            {/*>热搜标签排序页面</Text>*/}
            {/*<Text style={styles.text}*/}
            {/*onPress={() => {*/}
            {/*this.props.navigator.push({*/}
            {/*component: TabCustomPage,*/}
            {/*params: {...this.props, isRemove:true,isPopular:false,},*/}
            {/*})*/}
            {/*}}*/}
            {/*>热搜标签移除页面</Text>*/}

            <Toast ref={toast => this.toast = toast}/>
        </View>
    }
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    text: {
        color: 'black',
        fontSize: 30,
        alignSelf: 'center',
        borderWidth: 1,
        borderRadius: 5,
        borderColor: 'gray',
    },
    item: {
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        padding: 5,
        height: 80,
    },
    item_title: {
        fontSize: 14,
        alignSelf: 'flex-start',
        color: 'gray',
        opacity: 0.8,
        height: 20,
        margin: 5,
    }

});